<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* div{
      height: 300px;
      width: 300px;
      background-color: red;
    }
    span{
      height: 300px;
      width: 300px;
      background-color: red;
    } */
    .content{
      height: 800px;
      width: 800px;
      border: 1px blue solid;
    }
    .content img{
      float: left;
    }
  </style>
</head>
<body>
  <!--
    CSS定位机制
    普通流 浮动 绝对定位
    普通流：默认状态，元素自动从左往右，从上到下的排列
    块元素：独占一行，可以设置宽高，没有设置宽度的话，默认宽占满容器的100%。<p> <div> <ul> <li> <ol>
    行内元素：可以和其他元素同行显示，不能设置宽高，默认宽度根据内容的多少显示多少，span a b i u em
  //
      CSS Float的基础知识
      会使元素向左或者向右移动，只能左右，不能上下
      浮动元素碰到包含框或者另外一个浮动框，浮动停止
      浮动元素之后的元素将围绕它，之前的不受影响
      浮动元素会脱离标准流
  -->
  <!-- <div>我是块级元素1</div>
  <div>我是块级元素2</div>
  <span>我是行内元素1</span>
  <span>我是行内元素2</span> -->
  <div class="content">
    <img src="../../HTML/asset/1.jpg" height="100px" alt="">
    <p>普通流 浮动 绝对定位
      普通流：默认状态，元素自动从左往右，从上到下的排列
      块元素：独占一行，可以设置宽高，没有设置宽度的话，默认宽占满容器的100%。
      行内元素：可以和其他元素同行显示，不能设置宽高，默认宽度根据内容的多少显示多少，span a b i u em
      普通流 浮动 绝对定位
      普通流：默认状态，元素自动从左往右，从上到下的排列
      块元素：独占一行，可以设置宽高，没有设置宽度的话，默认宽占满容器的100%。
      行内元素：可以和其他元素同行显示，不能设置宽高，默认宽度根据内容的多少显示多少，span a b i u em
      普通流 浮动 绝对定位
      普通流：默认状态，元素自动从左往右，从上到下的排列
      块元素：独占一行，可以设置宽高，没有设置宽度的话，默认宽占满容器的100%。
      行内元素：可以和其他元素同行显示，不能设置宽高，默认宽度根据内容的多少显示多少，span a b i u em</p>
  </div>
</body>
</html>